<!-- 食谱页面 -->
<template>
  <view class="container">
		<view class="container-body">
			<view class="sidebar">
				<van-sidebar :active-key="activeType" @change="onDayChange">
					<van-sidebar-item v-for="day in types" :key="day.id" :title="day.name">{{day.name}}</van-sidebar-item>
				</van-sidebar>
			</view>
			<view class="content">
				<view class="meal-section" v-for="meal in types[activeType].subType" :key="meal.key">
					<view class="meal-type">{{ meal.name }}</view>
					<view class="meal-content">
						<view class="meal-item" v-for="item in meals[activeType][meal.key]" :key="item.name">
							<van-image class="meal-item-image"  width="80"  height="80" radius="5" :src="item.image"/>
							<view class="meal-item-text">{{ item.name }}</view>
						</view> 
					</view>
				</view>
			</view>
		</view>
		<view class="container-footer">
			<van-button type="primary" size="small" plain @click="batchEdit">批量编辑</van-button>
			<van-button type="info" size="small" plain @click="generatePlan">一键生成</van-button>
		</view>
  </view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	// import { uniSidebar, uniSidebarItem, uniImage } from '@dcloudio/uni-ui';

	const activeType = ref(0); // 默认显示今天的菜单
	const types = ref([
		{ id: 0, sort: 0, name: '推荐' , subType: [{ key: 'breakfast', name: '菜式' },	{ key: 'lunch', name: '口味' },	{ key: 'dinner', name: '人群' }] },
		{ id: 1, sort: 1, name: '早餐' , subType: [{ key: 'breakfast', name: '面点' },	{ key: 'lunch', name: '营养' },	{ key: 'dinner', name: '快餐' }] },
		{ id: 2, sort: 2, name: '家常' , subType: [{ key: 'breakfast', name: '小炒' },	{ key: 'lunch', name: '素菜' },	{ key: 'dinner', name: '速食' }] },
		{ id: 3, sort: 3, name: '肉类' , subType: [{ key: 'breakfast', name: '猪肉' },	{ key: 'lunch', name: '牛肉' },	{ key: 'dinner', name: '海鲜' }] },
		{ id: 4, sort: 4, name: '汤粥' , subType: [{ key: 'breakfast', name: '米粥' },	{ key: 'lunch', name: '骨汤' },	{ key: 'dinner', name: '营养补血羹' }]},
		{ id: 5, sort: 5, name: '甜品' , subType: [{ key: 'lunch', name: '面包' },	{ key: 'dinner', name: '蛋糕' }] },
		{ id: 6, sort: 6, name: '饮料' , subType: [{ key: 'lunch', name: '奶茶' },	{ key: 'dinner', name: '果汁' }]},
		{ id: 7, sort:7, name: '其他' , subType: [{ key: 'lunch', name: '节日' },	{ key: 'dinner', name: '节气' }]}
	]);
	const meals = ref({
		0: { 
			breakfast: [
			{ name: '白粥', image: '/static/images/recipe/laozhixia.png' },
			{ name: '排骨汤', image: '/static/images/recipe/laozhixia.png' },
			{ name: '银耳羹', image: '/static/images/recipe/laozhixia.png' }
			], 
			lunch: [
				{ name: '重辣', image: '/static/images/recipe/laozhixia.png' },
				{ name: '清淡', image: '/static/images/recipe/laozhixia.png' }
			],
			dinner: [
				{ name: '老人', image: '/static/images/recipe/laozhixia.png' },
				{ name: '成人', image: '/static/images/recipe/laozhixia.png' },
				{ name: '儿童', image: '/static/images/recipe/laozhixia.png' },
				{ name: '病号', image: '/static/images/recipe/laozhixia.png' }
			]
		},
		1: { breakfast: [], lunch: [], dinner: [] },
		2: { breakfast: [], lunch: [], dinner: [] },
		3: { breakfast: [], lunch: [], dinner: [] },
		4: {
			breakfast: [],
			lunch: [],
			dinner: []
		},
		5: {
			breakfast: [], 
			lunch: [],
			dinner: [
				{ name: '奶油蛋糕', image: '/static/images/recipe/laozhixia.png' },
				{ name: '冰淇淋蛋糕', image: '/static/images/recipe/laozhixia.png' }
			]
		},
		6: { breakfast: [], lunch: [], dinner: [] },
		7: { breakfast: [], lunch: [], dinner: [] }
	});

	// 切换星期
	function onDayChange(event) {
		activeType.value = event.detail;
		fetchMeals();
		// Fetch or update meals data based on the selected day
	}

	// 获取周菜单数据
	function fetchMeals() {
		// 这里可以添加获取菜单数据的逻辑
	}
	onMounted(() => {
		fetchMeals();
	});
</script>

<style scoped lang="scss">
.container {
	position: relative;
	width: 100vw;
	height: 100vh;
	.container-body {
		display: flex;
		height: calc(100% - 40px);
		overflow:hidden;
		.sidebar {
				width: 20%;
				height: 100%;
			}
			.content {
				box-sizing: border-box;
				width: 80%;
				padding: 10px;
				height: 100%;
				overflow: auto;
				// .meal-section {
				// 	margin-bottom: 20px;
				// }
				.meal-type {
					font-size: 18px;
					font-weight: bold;
					margin-bottom: 10px;
				}
				.meal-content {
					display: flex;
					flex-flow: row wrap;
					.meal-item {
						position:relative;
						// display: flex;
						// flex-flow: row nowrap;
						// justify-content: space-between;
						// padding: 10px 0;
						flex: 1 1 calc(33.333% - 10px); /* 每个项目占据三分之一宽度并留出间隙 */
						box-sizing: border-box; /* 包含padding和border */
						margin: 5px; /* 可选：设置间隙 */
						background-color: #4CAF50; /* 可选：背景色 */
						color: white; /* 可选：文字颜色 */
						text-align: center; /* 可选：文本居中 */
						// padding: 20px; /* 可选：内边距 */
						border-radius: 5px; /* 可选：圆角 */
						.meal-item-image {
							width: 100%;
						}
						.meal-item-text {
							position: absolute;
							bottom: 12px;
							width: 100%;
							text-align: center;
							font-size: 14px;
							font-weight: 700;
							color: #fff;
						}
					}
				}
			}
	}
	.container-footer {
		position: fixed;
		bottom: 0;
		left: 0;
    display: inline-flex;
    justify-content: space-evenly;
    width: 100%;
    height: 40px;
    line-height: 40px;
		background-color: #f5f5f5;
	}
}
/* 适应更小屏幕的样式 */
@media (max-width: 600px) {
    .meal-item {
        flex: 1 1 calc(50% - 10px); /* 小于600px的屏幕上每个项目占50%宽度 */
    }
}

@media (max-width: 400px) {
    .meal-item {
        flex: 1 1 100%; /* 小于400px的屏幕上每个项目占100%宽度 */
    }
	}
</style>